/*
 * @Author: chenzhinjian
 * @Date: 2019-01-10 17:57:14
 * @LastEditTime: 2019-03-19 13:57:19
 * @Description: 
 */
 $grid-prefix: $css-prefix;
input[type="file"] {
  display: block;
}

textarea {
  resize: vertical;
}

// label {
//   display: inline-block;
//   font-weight: bold;
//   margin-bottom: px-or-rem(5);
// } 
@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;
    @include box-shadow(inset 0 px-or-rem(1) px-or-rem(1) rgba(0, 0, 0, .075), 0 0 px-or-rem(8) $color-rgba);
  }
}
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $border-radius;
  }
  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }
  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}

@mixin form-group-type($type,$input-height-large,$input-padding-vertical-large,$input-padding-horizontal-large,$font-size-large,$line-height-large, $input-border-radius-large) {
  #{$type} {
    .form-control {
      height: $input-height-large;
      padding: $input-padding-vertical-large $input-padding-horizontal-large;
      font-size: $font-size-large;
      line-height: $line-height-large;
      border-radius: $input-border-radius-large;
    }
    select.form-control {
      height: $input-height-large;
      line-height: $input-height-large;
    };
    textarea.form-control,
    select[multiple].form-control {
      height: auto;
    }
    .form-control-static {
      height: $input-height-large;
      min-height: ($line-height-computed + $font-size-large);
      padding: ($input-padding-vertical-large + 1) $input-padding-horizontal-large;
      font-size: $font-size-large;
      line-height: $line-height-large;
    }
  }
}
@mixin make-row($gutter: $grid-gutter-width) {
  margin-right: floor(($gutter / -2));
  margin-left: ceil(($gutter / -2));
  @include clearfix;
}
// Inline forms
.form-control {
  display: block;
  width: 100%;
  height: $input-height-base;
  padding: $input-padding-vertical-base $input-padding-horizontal-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  color: $input-color;
  background-color: $input-bg;
  background-image: none; 
  border: px-or-rem(1) solid $input-border;
  border-radius: $input-border-radius; 
  @include box-shadow(inset 0 px-or-rem(1) px-or-rem(1) rgba(0, 0, 0, .075));
  @include transition($border-color ease-in-out .15s, box-shadow ease-in-out .15s);
  @include form-control-focus;

  @include placeholder;
  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
  };
  // Disabled and read-only inputs
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  &[readonly],
  fieldset[disabled] & {
    background-color: $input-bg-disabled;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
  // [converter] extracted textarea& to textarea.form-control
}
.form-label {
  margin-bottom: 0;
  padding-top: px-or-rem(3);
  text-align: right;
}

// label+input
.form-group {
  margin-bottom: px-or-rem(8);
}

@include input-size('.input-sm', $input-height-small,$input-padding-vertical-small,$input-padding-horizontal-small,$font-size-small,$line-height-small, $input-border-radius-small);
@include form-group-type('.form-group-sm',$input-height-small,$input-padding-vertical-small,$input-padding-horizontal-small,$font-size-small,$line-height-small, $input-border-radius-small);

@include form-group-type('.form-group-sm',$input-height-small,$input-padding-vertical-small,$input-padding-horizontal-small,$font-size-small,$line-height-small, $input-border-radius-small);
@include form-group-type('.input-lg',$input-height-large,$input-padding-vertical-large,$input-padding-horizontal-large,$font-size-large,$line-height-large, $input-border-radius-large);

@include input-size('.input-lg', $input-height-large,$input-padding-vertical-large,$input-padding-horizontal-large,$font-size-large,$line-height-large, $input-border-radius-large);
.input-group{
  display: table;
  width: 100%;
  .input-group-addon{
    span{
      display: inline-block;
      min-width: px-or-rem(70);
      text-align: right;
    }
  }
  label{
    display: table-cell;
    vertical-align: middle;
    border-radius: px-or-rem(3);
    height: px-or-rem(23);
    padding: px-or-rem(1) px-or-rem(5);
    font-size: px-or-rem(12);
    line-height: 1.5;
    text-align: right;
  }
  .form-control{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
  @include form-group-type('.form-group-sm',$input-height-small,$input-padding-vertical-small,$input-padding-horizontal-small,$font-size-small,$line-height-small, $input-border-radius-small);
  @include form-group-type('.input-group-lg',$input-height-large,$input-padding-vertical-large,$input-padding-horizontal-large,$font-size-large,$line-height-large, $input-border-radius-large);
}
.input-group > .form-control {
  width: 100%;
}
select[multiple],
select[size] {
  height: auto;
}
// Checkboxes and radios
//
// Indent the labels to position radios/checkboxes as hanging controls.
input[type="radio"],
input[type="checkbox"] {
  margin: px-or-rem(4) 0 0;
  margin-top: px-or-rem(1) \9; // IE8-9
  line-height: normal;
}
.radio,
.checkbox {
  position: relative;
  display: block;
  margin-top: px-or-rem(10);
  margin-bottom: px-or-rem(10);

  label {
    min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
    padding-left: px-or-rem(20);
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }
}
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: absolute;
  margin-left: -px-or-rem(20);
  margin-top: px-or-rem(4) \9;
}

.radio + .radio,
.checkbox + .checkbox {
  margin-top: -px-or-rem(5); // Move up sibling radios or checkboxes for tighter spacing
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  display: inline-block;
  padding-left: px-or-rem(20);
  margin-bottom: 0;
  vertical-align: middle;
  font-weight: normal;
  cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: px-or-rem(10); // space out consecutive inline controls
}

// Apply same disabled cursor tweak as for inputs
// Some special care is needed because <label>s don't inherit their parent's `cursor`.
//
// Note: Neither radios nor checkboxes can be readonly.
input[type="radio"],
input[type="checkbox"] {
  &[disabled],
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}
// These classes are used directly on <label>s
.radio-inline,
.checkbox-inline {
  &.disabled,
  fieldset[disabled] & {
    cursor: $cursor-disabled;
  }
}
// These classes are used on elements with <label> descendants
.radio,
.checkbox {
  &.disabled,
  fieldset[disabled] & {
    label {
      cursor: $cursor-disabled;
    }
  }
}

.form-horizontal {

  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    padding-top: ($padding-base-vertical + 1); // Default padding plus a border
    margin-top: 0;
    margin-bottom: 0;
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: ($line-height-computed + ($padding-base-vertical + 1));
  }

  // Make form groups behave like rows
  .form-group {
    @include make-row;
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: $screen-sm-min) {
    .control-label {
      padding-top: ($padding-base-vertical + 1); // Default padding plus a border
      margin-bottom: 0;
      text-align: right;
    }
  }

  // Validation states
  //
  // Reposition the icon because it's now within a grid column and columns have
  // `position: relative;` on them. Also accounts for the grid gutter padding.
  .has-feedback .form-control-feedback {
    right: floor(($grid-gutter-width / 2));
  }

  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: ($input-padding-vertical-large + 1);
        font-size: $font-size-large;
      }
    }
  }
  .form-group-sm {
    @media (min-width: $screen-sm-min) {
      .control-label {
        padding-top: ($input-padding-vertical-small + 1);
        font-size: $font-size-small;
      }
    }
  }
}
@mixin form-inline {

  // Kick in the inline
  @media (min-width: $screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      margin-bottom: 0;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }
    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}
// [converter] extracted as `@mixin form-inline` for libsass compatibility
.form-inline {
  @include form-inline;
}
.#{$grid-prefix}group-radio{
  .#{$grid-prefix}radio-label{
    font-size: $font-size-small;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    margin-right: px-or-rem(8);
    cursor: pointer;
    .#{$grid-prefix}radio{
      display: inline-block;
      margin-right: px-or-rem(4);
      white-space: nowrap;
      position: relative;
      line-height: 1;
      vertical-align: middle;
      cursor: pointer;
      .#{$grid-prefix}radio-inner{
        display: inline-block;
        width: px-or-rem(14);
        height: px-or-rem(14);
        position: relative;
        top: 0;
        left: 0;
        
        background-color: #fff;
        border: px-or-rem(1) solid #dcdee2;
        border-radius: 50%;
        transition: all .2s ease-in-out;
        &:after{
          display: inline-block;
          position: absolute;
          content: '';
          left: px-or-rem(3);
          top: px-or-rem(3);
          width: px-or-rem(8);
          height: px-or-rem(8);
          background-color: $primary-color;
          cursor: pointer;
          border-radius: 100%;
          opacity: 0;
          @include scale(0);
        }
      }
      .#{$grid-prefix}radio-input{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        opacity: 0;
        margin: px-or-rem(0);
        cursor: pointer;
      }
      
    }
    
    
   
  }
  .#{$grid-prefix}radio-checked{
    .#{$grid-prefix}radio{
      .#{$grid-prefix}radio-inner{
        &:after{
          opacity: 1;
          @include scale(1);
          transition: all .2s ease-in-out;
        }
      }
    }
  }
  .#{$grid-prefix}disabled{
    cursor: not-allowed;
    .#{$grid-prefix}radio{
      cursor: not-allowed;
      .#{$grid-prefix}radio-inner{
        cursor: not-allowed;
        &:after{
          opacity: 0;
          @include scale(0);
        }
      }
      .#{$grid-prefix}radio-input{
        cursor: not-allowed;
      }
    }
  }
}

.#{$grid-prefix}radio-label{
  font-size: $font-size-small;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  margin-right: px-or-rem(8);
  cursor: pointer;
  .#{$grid-prefix}radio{
    display: inline-block;
    margin-right: px-or-rem(4);
    white-space: nowrap;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    .#{$grid-prefix}radio-inner{
      display: inline-block;
      width: px-or-rem(14);
      height: px-or-rem(14);
      position: relative;
      top: 0;
      left: 0;
      
      background-color: #fff;
      border: px-or-rem(1) solid #dcdee2;
      border-radius: 50%;
      transition: all .2s ease-in-out;
      &:after{
        display: inline-block;
        position: absolute;
        content: '';
        left: px-or-rem(3);
        top: px-or-rem(3);
        width: px-or-rem(8);
        height: px-or-rem(8);
        background-color: $primary-color;
        cursor: pointer;
        border-radius: 100%;
        opacity: 0;
        @include scale(0);
      }
    }
    .#{$grid-prefix}radio-input{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      opacity: 0;
      margin: px-or-rem(0);
      cursor: pointer;
    }
    
  }
  
  
  
}
.#{$grid-prefix}radio-checked{
  .#{$grid-prefix}radio{
    .#{$grid-prefix}radio-inner{
      &:after{
        opacity: 1;
        @include scale(1);
        transition: all .2s ease-in-out;
      }
    }
  }
}
.#{$grid-prefix}disabled{
  cursor: not-allowed;
  .#{$grid-prefix}radio{
    cursor: not-allowed;
    .#{$grid-prefix}radio-inner{
      cursor: not-allowed;
      &:after{
        opacity: 0;
        @include scale(0);
      }
    }
    .#{$grid-prefix}radio-input{
      cursor: not-allowed;
    }
  }
}

.#{$grid-prefix}radio-block{
  .#{$grid-prefix}radio-label{
    display: block;
  }
  &> .#{$grid-prefix}radio{
    border-radius: px-or-rem(5);
  }
}
.#{$grid-prefix}radio-button{
  .#{$grid-prefix}radio-label{
    margin: px-or-rem(0);
    cursor: pointer;
    border: px-or-rem(1) solid $border-color;
    border-left: px-or-rem(0);
    padding:px-or-rem(0) px-or-rem(15);
    margin: px-or-rem(0);
    background-color: #fff;
    line-height:px-or-rem(30);
    .#{$grid-prefix}radio{
     
      .#{$grid-prefix}radio-inner{
        opacity: 0;
        width: 0;
        height: 0;
        bottom: px-or-rem(0);
        left: px-or-rem(0);
        right: px-or-rem(0);
        &:after{
         opacity: 0;
        }
      }
      .#{$grid-prefix}radio-input{
       width: px-or-rem(0);
       height: px-or-rem(0);
       opacity: 0;
      }
    }
    &:first-child{
      border-radius: px-or-rem(5) px-or-rem(0) px-or-rem(0) px-or-rem(5);
      border-left: px-or-rem(1) solid $border-color;
    }
    &:last-child{
      border-left: px-or-rem(0);
      border-radius: px-or-rem(0) px-or-rem(5) px-or-rem(5) px-or-rem(0);
    }
  }
  // .sm{}.#{$grid-prefix}radio-label> .#{$grid-prefix}radio{
  //   line-height: $input-height-small
  // }
 
  
  .#{$grid-prefix}-disabled{
    // .#{$grid-prefix}radio-label{
      background-color: darken(#fff, 10%);
      cursor: not-allowed;
      opacity: .65;
      &:hover,
      &:focus,
      &.focus {
        background-color: darken(#fff, 10%);
        cursor: not-allowed;
        @include box-shadow(none);
        opacity: .65;
      // }
    }
    
  }
  .#{$grid-prefix}radio-checked{
      color:$primary-color;
      border:px-or-rem(1) solid $primary-color !important;
      // border-left:px-or-rem(1) solid $primary-color;
      // border-left: px-or-rem(0);
      @include box-shadow(-px-or-rem(1) px-or-rem(0) px-or-rem(2) $primary-color);
      @include transition($border-color ease-in-out .15s, box-shadow ease-in-out .15s);
      @include form-control-focus;
      .#{$grid-prefix}radio-inner{
        &:after{
          
        }
      }
  }
 
}
.#{$grid-prefix}radio-block{
  display:inline-block;
  .#{$grid-prefix}radio-button{
    .#{$grid-prefix}radio-label{
      border:px-or-rem(1) solid $border-color;
      border-top:px-or-rem(0); 
      // border: px-or-rem(0);
      &:first-child{
        border-radius: px-or-rem(5) px-or-rem(5) px-or-rem(0) px-or-rem(0);
        border:px-or-rem(1) solid $border-color;
      }
      &:last-child{
        border-radius: px-or-rem(0) px-or-rem(0) px-or-rem(5) px-or-rem(5);
        // border:px-or-rem(1) solid $border-color;
      }
    }
     .#{$grid-prefix}radio-checked{
        color:$primary-color;
        border:px-or-rem(1) solid $primary-color !important;
        border-top: px-or-rem(0);
        @include box-shadow(px-or-rem(0) px-or-rem(0) px-or-rem(2) $primary-color);
        @include transition($border-color ease-in-out .15s, box-shadow ease-in-out .15s);
        @include form-control-focus;
        .#{$grid-prefix}radio-inner{
          &:after{
            
          }
      }
    }
    .#{$grid-prefix}disabled{
      cursor: not-allowed;
    }
  };
  .#{$grid-prefix}radio-label{
    // display: block;
    // border:px-or-rem(1) solid $border-color;
    // border-top: px-or-rem(0);
    // .#{$grid-prefix}radio{
      
    // }
    // &:first-child{
    //   border-radius: px-or-rem(5) px-or-rem(5) px-or-rem(0) px-or-rem(0);
    //   border-top: px-or-rem(0);
    // }
    // &:last-child{
    //   border-radius: px-or-rem(0) px-or-rem(0) px-or-rem(5) px-or-rem(5);
    // }
  }
  // .#{$grid-prefix}radio-checked{
  //     color:$primary-color;
  //     border:px-or-rem(1) solid $primary-color;
  //     border-top: px-or-rem(0);
  //     @include box-shadow(px-or-rem(0) -px-or-rem(1) px-or-rem(2) $primary-color);
  //     @include transition($border-color ease-in-out .15s, box-shadow ease-in-out .15s);
  //     @include form-control-focus;
  //     .#{$grid-prefix}radio-inner{
  //       &:after{
          
  //       }
  //     }
  // }
  
}

.#{$grid-prefix}group-checkbox{
    .#{$grid-prefix}checkbox-label{
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        font-size: px-or-rem(12);
        .#{$grid-prefix}checkbox{
          position: relative;
          .#{$grid-prefix}checkbox-inner{
            display: inline-block;
            vertical-align: middle;
            margin-right: px-or-rem(5);
            position: relative;
            line-break: $line-height-base;
            width: px-or-rem(14);
            height: px-or-rem(14);
            border-radius: px-or-rem(2);
            background-color: #fff;
            border: px-or-rem(1) solid $border-color;
            &:after{
              content: '';
              display: inline-block;
              width: px-or-rem(4);
              height: px-or-rem(8);
              position: absolute;
              top: px-or-rem(1);
              left: px-or-rem(4);
              border: px-or-rem(2) solid #fff;
              border-top: px-or-rem(0);
              border-left: px-or-rem(0);
              opacity: 0;
              @include transform(rotate(45deg) scale(0));
              @include transition(all $transition-time $ease-in-out );
            }
          }
          .#{$grid-prefix}checkbox-input{
            display: inline-block;
            width: px-or-rem(8);
            height: px-or-rem(8);
            position: absolute;
            left: px-or-rem(0);
            top:px-or-rem(0);
            margin: px-or-rem(0);
            opacity: 0;
          }
        }
    }
    .#{$grid-prefix}checkbox-checked{
      color: $primary-color;
      .#{$grid-prefix}checkbox{
        position: relative;
        .#{$grid-prefix}checkbox-inner{
          background:$primary-color;
          border: px-or-rem(1) solid $primary-color;
          &:after{
            opacity: 1;
            @include transform(rotate(45deg) scale(1));
          }
        }
        .#{$grid-prefix}checkbox-input{
          
        }
      }
    }
    .#{$grid-prefix}checkbox-line{
      .#{$grid-prefix}checkbox{
        position: relative;
        .#{$grid-prefix}checkbox-inner{
          background:$primary-color;
          border: px-or-rem(1) solid $primary-color;
          &:after{
            top: px-or-rem(4);
            width: px-or-rem(4);
            left: px-or-rem(2);
            opacity: 1;
            height: px-or-rem(0);
            border: px-or-rem(2) solid #fff;
            @include transform(rotate(0deg) scale(1));
          }
        }
        .#{$grid-prefix}checkbox-input{
          
        }
      }
    }
    .#{$grid-prefix}checkbox-disabled{
      cursor: not-allowed;
      .#{$grid-prefix}checkbox{
        position: relative;
        .#{$grid-prefix}checkbox-inner{
          background-color: darken(#fff, 10%);
          opacity: .65;
          &:hover,
          &:focus,
          &.focus {
            background-color: darken(#fff, 10%);
            @include box-shadow(none);
            opacity: .65;
          }
          &:after{
          }
        }
        .#{$grid-prefix}checkbox-input{
          
        }
      }
    }
}

.#{$grid-prefix}checkbox-label{
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    font-size: px-or-rem(12);
    .#{$grid-prefix}checkbox{
      position: relative;
      .#{$grid-prefix}checkbox-inner{
        display: inline-block;
        vertical-align: middle;
        margin-right: px-or-rem(5);
        position: relative;
        line-break: $line-height-base;
        width: px-or-rem(14);
        height: px-or-rem(14);
        border-radius: px-or-rem(2);
        background-color: #fff;
        border: px-or-rem(1) solid $border-color;
        &:after{
          content: '';
          display: inline-block;
          width: px-or-rem(4);
          height: px-or-rem(8);
          position: absolute;
          top: px-or-rem(1);
          left: px-or-rem(4);
          border: px-or-rem(2) solid #fff;
          border-top: px-or-rem(0);
          border-left: px-or-rem(0);
          opacity: 0;
          @include transform(rotate(45deg) scale(0));
          @include transition(all $transition-time $ease-in-out );
        }
      }
      .#{$grid-prefix}checkbox-input{
        display: inline-block;
        width: px-or-rem(8);
        height: px-or-rem(8);
        position: absolute;
        left: px-or-rem(0);
        top:px-or-rem(0);
        margin: px-or-rem(0);
        opacity: 0;
      }
    }
}
.#{$grid-prefix}checkbox-checked{
  color: $primary-color;
  .#{$grid-prefix}checkbox{
    position: relative;
    .#{$grid-prefix}checkbox-inner{
      background:$primary-color;
      border: px-or-rem(1) solid $primary-color;
      &:after{
        opacity: 1;
        @include transform(rotate(45deg) scale(1));
      }
    }
    .#{$grid-prefix}checkbox-input{
      
    }
  }
}
.#{$grid-prefix}checkbox-line{
  .#{$grid-prefix}checkbox{
    position: relative;
    .#{$grid-prefix}checkbox-inner{
      background:$primary-color;
      border: px-or-rem(1) solid $primary-color;
      &:after{
        top: px-or-rem(4);
        width: px-or-rem(4);
        left: px-or-rem(2);
        opacity: 1;
        height: px-or-rem(0);
        border: px-or-rem(2) solid #fff;
        @include transform(rotate(0deg) scale(1));
      }
    }
    .#{$grid-prefix}checkbox-input{
      
    }
  }
}
.#{$grid-prefix}checkbox-disabled{
  cursor: not-allowed;
  .#{$grid-prefix}checkbox{
    position: relative;
    .#{$grid-prefix}checkbox-inner{
      background-color: darken(#fff, 10%);
      opacity: .65;
      &:hover,
      &:focus,
      &.focus {
        background-color: darken(#fff, 10%);
        @include box-shadow(none);
        opacity: .65;
      }
      &:after{
      }
    }
    .#{$grid-prefix}checkbox-input{
      
    }
  }
}

.#{$grid-prefix}checkbox-button{
  .#{$grid-prefix}checkbox-label{
    display: inline-block;
    padding: px-or-rem(0) px-or-rem(15);
    cursor: pointer;
    font-size: px-or-rem(12);
    line-height: $line-height-computed;
    border: px-or-rem(1) solid $border-color;
    border-left: px-or-rem(0);
   
    &:first-child{
      border-radius: px-or-rem(5) px-or-rem(0) px-or-rem(0) px-or-rem(5);
      border-left: px-or-rem(1) solid $border-color;
    }
    &:last-child{
      border-left: px-or-rem(0);
      border-radius: px-or-rem(0) px-or-rem(5) px-or-rem(5) px-or-rem(0);
    }
    .#{$grid-prefix}checkbox{
      position: relative;
      opacity: 0;
      display: none;
      .#{$grid-prefix}checkbox-inner{
        &:after{
        }
      }
      .#{$grid-prefix}checkbox-input{
       
      }
    }
  }
  .#{$grid-prefix}checkbox-checked{
    background-color: $primary-color;
    color: #fff;
    border:px-or-rem(1) solid $primary-color;
    border-left: px-or-rem(0) !important;
    @include box-shadow(-px-or-rem(1) px-or-rem(0) px-or-rem(2) $primary-color);
    .#{$grid-prefix}checkbox{
      position: relative;
      .#{$grid-prefix}checkbox-inner{
        &:after{
        }
      }
      .#{$grid-prefix}checkbox-input{
        
      }
    }
  }
  .#{$grid-prefix}checkbox-line{
    .#{$grid-prefix}checkbox{
      .#{$grid-prefix}checkbox-inner{
        &:after{
         
        }
      }
      .#{$grid-prefix}checkbox-input{
        
      }
    }
  }
  .#{$grid-prefix}checkbox-disabled{
    cursor: not-allowed;
    background-color: darken(#fff, 10%);
    opacity: .65;
    &:hover,
    &:focus,
    &.focus {
      background-color: darken(#fff, 10%);
      @include box-shadow(none);
      opacity: .65;
    }
    .#{$grid-prefix}checkbox{
      .#{$grid-prefix}checkbox-inner{
        
      }
      .#{$grid-prefix}checkbox-input{
        
      }
    }
  }
}
.#{$grid-prefix}group-switch{
  font-size: px-or-rem(12);
  display: inline-block;
  cursor: pointer;
  @include user-select(none)
  .#{$grid-prefix}switch{
    display: inline-block;
    position: relative;
    width: px-or-rem(44);
    height: px-or-rem(22);
    line-height: px-or-rem(22);
    border: px-or-rem(1) solid $border-color;
    border-radius: px-or-rem(22);
    @include transition(all $transition-time $ease-in-out );
    background-color: $gray-lighter;
    &:after{
      content: '';
      display: inline-block;
      position: absolute;
      width: px-or-rem(20);
      height: px-or-rem(20);
      background-color: #fff;
      border-radius: 100%;
      top: px-or-rem(0);
      right: px-or-rem(0);
      @include transition(left 1.2s ease-in-out);
    };
    .#{$grid-prefix}inner-left{
      position: absolute;
      left: px-or-rem(5);
      top:px-or-rem(0);
      opacity: 1;
      @include transition(all $transition-time $ease-in-out );
    }
    .#{$grid-prefix}inner-right{
      position: absolute;
      right: px-or-rem(5);
      color: #fff;
      top:px-or-rem(0);
      opacity: 1;
      @include transition(all $transition-time $ease-in-out );
    }
  };
  .#{$grid-prefix}switch-checked{
   
    background-color: $primary-color;
    &:after{
      left: px-or-rem(0);      
    };
    .#{$grid-prefix}inner-left{
      opacity: 0;
    }
    .#{$grid-prefix}inner-right{
      opacity: 1;
    }
  };
  .#{$grid-prefix}switch-disabled{
    cursor: no-drop;
    background-color: #ccc;
  }
};
.sm{
  .#{$grid-prefix}radio-label{
      line-height: px-or-rem(22);
  }
  .#{$grid-prefix}checkbox-label{
    line-height: px-or-rem(22);
  };
  .#{$grid-prefix}switch{
    width: px-or-rem(28);
    height: px-or-rem(16);
    font-size: px-or-rem(10);
    line-height: px-or-rem(16);
    &:after{
      top: px-or-rem(1);
      width: px-or-rem(12);
      height: px-or-rem(12);
    };
  }
}
.lg{
  .#{$grid-prefix}radio-label{
      line-height: px-or-rem(38);
      font-size: px-or-rem(14)
  }
  .#{$grid-prefix}checkbox-label{
      line-height: px-or-rem(38);
      font-size: px-or-rem(14)
  }
    .#{$grid-prefix}switch{
      width: px-or-rem(56);
    }
}
